<template>
  <a-modal
    :visible="visible"
    :keyboard="true"
    :cancel-text="'取消'"
    :ok-text="'确认'"
    :centered="true"
    :destroy-on-close="true"
    :title="title"
    width="600px"
    @ok="closeModal"
    @cancel="closeModal"
  >
    <a-table
      :columns="visionColumns"
      :loading="tableLoading"
      :data-source="visionData"
      row-key="id"
    >
    </a-table>
  </a-modal>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { queryByUid } from '@/api/plugin'

@Component({
  components: {},
})
export default class VisionModal extends Vue {
  @Prop({ type: Boolean, default: false }) visible!: boolean
  @Prop({ type: Number, default: 0 }) id!: number
  @Prop({ type: String, default: '' }) title!: string

  public visionColumns: any = [
    {
      title: '版本号',
      key: 'version',
      dataIndex: 'version',
      scopedSlots: { customRender: 'version' },
      sorter: (a: { version: string }, b: { version: string }) =>
        `${a.version}` > `${b.version}` ? 1 : -1,
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: '发布时间',
      dataIndex: 'publicTime',
      key: 'publicTime',
      // defaultSortOrder: 'descend',
      sorter: (a: { publicTime: string }, b: { publicTime: string }) =>
        Date.parse(a.publicTime) - Date.parse(b.publicTime),
    },
    {
      title: '操作',
      key: 'operate',
      scopedSlots: { customRender: 'action' },
    },
  ]
  public visionData: any = []
  public tableLoading: boolean = false

  @Watch('id')
  public idChange() {
    console.log(this.id)
    if (this.id !== 0) {
      this.viewVisions(this.id)
    }
  }

  public async viewVisions(id: any) {
    this.tableLoading = true
    const response = await queryByUid({ data: { uid: id } })
    this.tableLoading = false
    if (response.data.code === 100) {
      this.visionData = response.data.result
    } else {
      this.$message.error(response.data.message)
    }
  }

  public mounted() {
    this.viewVisions(this.id)
  }

  public closeModal() {
    this.$emit('cancel')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.m_title {
  align-items: center;
  display: flex;
  margin-bottom: 16px;
  margin-top: 24px;

  strong {
    color: #373b52;
    // font-family: PingFangSC-Medium, PingFang SC;
    font-size: 16px;
  }
}

.divider {
  background-color: #6973ff;
  height: 18px;
  margin-right: 8px;
  width: 4px;
}
</style>
